import React,{Component} from 'react';
import { Table,Divider,Layout, Button,Modal} from 'antd';
import { filedData, filedCol } from '../configData';
import '../style.scss';

const { Header, Content, Footer } = Layout;

class CheckModal extends Component{
    render(){
        return(
            <Modal 
                  destroyOnClose={true}
                  width='800px'
                  footer={<Button type='primary' onClick={()=>{this.props.cancelDBModal();}}>确定</Button>}
                  visible={this.props.visible}
                  onCancel={()=>{
                    this.props.cancelDBModal();
                  }}>
                <Layout className="layout">
                    <Header className="header">
                        <p className="title">资源挂接</p>
                    </Header>
                    <Content className='content'>
                        <Divider className='divider' orientation="left" plain>已挂接字段</Divider>
                        <div className="input-wrapper">
                            <div className="input-left">
                                <p className='text'>数据库名称</p><input placeholder="公安稽查数据"/>
                            </div>
                            <div className="input-right">
                                <p className='text'>库表名称</p><input placeholder="test"/>
                            </div>
                        </div>
                        <div className="table-title-wrapper">
                            <div className="left">
                            <p className='text'>已选择字段</p>
                            </div>
                            <div className="right">
                            <p className='text'>&nbsp;</p>
                            </div>
                        </div>
                        <Table  className="table-wrapper" 
                            pagination={{position:["bottomCenter"]}}
                            dataSource={filedData} 
                            columns={filedCol} 
                            size="small" bordered/>
                    </Content>
                </Layout>  
            </Modal>
            
        )
    }
}

export default CheckModal;